<template>
  <div class="main" @click="hanlderPopout">
    <div class="mainLeft">
      {{ title }}
      <span class="spanClass"> {{ bleStatus == 4 ? "" : value }}</span>
    </div>
    <span :class="[bleStatus != 4 && value ? img_active : imgPat, 'ic_pat']"></span>
  </div>
</template>

<script>
import Popout from "./Popout.vue";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  props: ["title", "imgPat", "value", "img_active"],
  components: { Popout },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      bleStatus: (state) => state.ble.bleStatus,
    }),
  },
  methods: {
    hanlderPopout() {
      //   console.log("弹框");
      this.$emit("handlerisShowPop");
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  width: 162px;
  height: 64px;
  background: var(--bg_contrast);
  opacity: 1;
  border-radius: 16px;
  margin-left: 12px;
  .mainLeft {
    display: flex;
    flex-direction: column;
    color: var(--font);
    font-size: 16px;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    line-height: 32px;
    .spanClass {
      font-size: 12px;
      color: var(--font_gray);
    }
  }
}
</style>